@import "~style";

.@{prefix}-dbconnect {
  height: 260px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  &-opt {
    padding: 0 10px;
  }
  &-left {
    height: 100%;
    border: 1px solid @primary-border-color;
    input[type="text"] {
      width: 100%;
    }
    width: 50%;
    &-list {
      padding: 3px;
      height: calc(100% - 38px);
      overflow: auto;
      & > div {
        & > span {
          &:first-child {
            width: 25px;
          }
          &:nth-child(2) {
            width: calc(50% - 15px);
            & > span {
              width: 100%;
            }
          }
          &:nth-child(3) {
            margin-left: 5px;
            width: calc(50% - 15px);
            & > span {
              width: 100%;
            }
          }
        }
      }
    }
    &-header {
      padding: 5px;
      display: flex;
      flex-direction: row;
      &-opt {
        user-select: none;
        border: 1px solid @primary-border-color;
        border-radius: 2px;
        display: inline-block;
        height: 28px;
        & > span + span {
          position: relative;
          &:before {
            position: absolute;
            content: " ";
            width: 1px;
            height: 60%;
            top: 20%;
            left: 0;
            background-color: @primary-border-color;
          }
        }
        & > span {
          &:first-child {
            i {
              color: @primary-color;
            }
          }
          &:last-child {
            i {
              color: @danger-color;
            }
          }
        }
      }
      &-desc {
        display: inline-block;
        height: 28px;
        padding: 2px 8px;
        border: 1px solid @primary-border-color;
        border-radius: 2px;
        user-select: none;
        flex-grow: 1;
        margin-left: 8px;
        text-align: center;
      }
    }
  }
  &-right {
    overflow: hidden;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .@{prefix}-form-item-label {
      margin: unset;
    }
    &-button {
      text-align: center;
      padding-top: 5px
    }
  }
  &-example-config {
    &-item {
      border: solid 1px @success-color;
      padding: 5px;
      margin: 5px;
      &-header {
        color: @background-hl;
      };
      &-content {
        &-label {
          color: @success-color;
        }
        &-value {
          color: @danger-color;
          user-select: auto;
        }
      }
    }
  }
}
